<template>
  <view style="padding: 10px 20px">
    <view style="text-align: center">
      <view style="font-size: 38upx">全球独角兽企业500强工程企业</view>
    </view>
    <view style="margin-top: 20upx">
      <u-line></u-line>
    </view>
    <!-- <view style="margin-top: 20upx;font-size:26upx;color:#666;margin-bottom:20upx">
            报告简介，文本内容，报告简介，文本内容报告简介，文本内容大会简介，文本内容报告简介，文本内容大会简介，文本内容大会简介，文本内容大会简介，文本内容，大会简介，文本内容，大会简介，文本内容大会简介，文本内容大会简介，文本内容大会简介
        </view> -->
    <view style="margin: 20upx 0px">
      <view class="flex" style="font-size: 26upx">
        <label style="font-size: 24upx; margin-right: 10upx">企业分类:</label>
        <u-checkbox-group
          v-model="checkboxValue1"
          placement="row"
          @change="checkboxChange"
        >
          <u-checkbox
            :customStyle="{ marginBottom: '8px', marginRight: '10px' }"
            labelSize="12"
            iconSize="10"
            v-for="(item, index) in checkboxList1"
            :key="index"
            :label="item.name"
            :name="item.name"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="flex" style="font-size: 26upx; margin-bottom: 8px">
        <picker
          mode="selector"
          :value="index"
          :range="country_area"
          @change="onPickerChange"
        >
          <view class="picker"> 区域分类:{{ selectedOption }} </view>
        </picker>
      </view>
      <view class="flex" style="font-size: 26upx">
        <label style="font-size: 24upx; margin-right: 10upx">赛道分类:</label>
        <picker :value="index" :range="array">
          <view class="uni-input">{{ array[index] }}</view>
        </picker>
      </view>
    </view>
    <view style="margin-top: 20upx">
      <mainList :baseList="topCompanyBasicList" url="/pages/company/details" />
    </view>
  </view>
</template>

<script>
import mainList from "@/components/mainList/index.vue";
import uTabs from "@/components/uTabs/index.vue";
export default {
  components: {
    mainList,
    uTabs,
  },
  data() {
    return {
      array: ["中国", "美国", "巴西", "日本"],
      index: 0,
      checkboxValue1: [],
      // 基本案列数据
      checkboxList1: [],
      topCompanyBasicList: [],
      country_area: [],
      country_id: undefined,
      selectedOption: "中国",
    };
  },
  onShow() {
    this.getType();
    this.getList();
    const country_area = uni.getStorageSync("country_area");
    this.country_area = country_area.map((option) => option.name);
  },
  methods: {
    // 企业分类改变
    checkboxChange(e) {
      console.log(e);
    },
    onPickerChange(e) {
      const index = e.detail.value;

      const country_area = uni.getStorageSync("country_area");
      this.selectedOption = this.country_area[index];
      this.country_id = country_area[index]?.id;
      this.getList();
    },
    async getType() {
      const res = await this.$api.getCompanyType({});
      console.log(res);
      this.checkboxList1 = res?.map((item) => {
        return {
          ...item,
          name: item.title || item.typename,
        };
      });
    },
    async getList() {
      const res = await this.$api.getCompanyList({
        country_id: this.country_id || 0,
        city_name: this.selectedOption,
        uid: uni.getStorageSync("userInfo").uid,
      });
      this.topCompanyBasicList = res?.map((item) => {
        return {
          ...item,
          img_url: item.icon_url,
          name: item.fullname,
          desc_text: "赛道：" + item.gs_suoshu_hangye,
          tag: "总估值：" + item.gs_zhuce_ziben,
          msg: item.gs_zhuce_dizhi,
        };
      });
    },
    handleEnter() {
      uni.navigateTo({
        url: "/pages/company/enter",
      });
    },
  },
};
</script>

<style></style>